<template>
  <view>
    <!-- 空view  撑高度-->
    <view class="empty"></view>
    <!-- 城市选择头部-->
    <view class="city_header">
      <view class="city_input">
        <image class="search_icon" :src="$store.state.imgBaseUrl + '/icon/searchIcon.png'" mode=""></image>
        <input class="ipt" type="text" @input="handleInputChange($event)" placeholder="输入城市名称" placeholder-style="color:#BBBBBB" />
      </view>
    </view>
    <view class="cover-page" v-show="flag">
      <scroll-view :scroll-into-view="scrollIntoId" :scroll-y="true" :scroll-with-animation="true" :style="{ height: windowHeight }">
        <view class="city-list">
          <view class="city_item" v-for="(item, index) in list" :key="index" @click="onSelect(item)">{{ item }}</view>
        </view>
      </scroll-view>
    </view>
    <view class="select-city-wrap">
      <view class="select-city">
        <view class="index">
          <view class="index-title " @click="scrollTo('#')">热门</view>
          <view class="index-item" v-for="item in citys" :key="item.letter" @click="scrollTo(item.letter)">{{ item.letter }}</view>
        </view>
        <scroll-view :scroll-into-view="scrollIntoId" :scroll-y="true" :scroll-with-animation="true" :style="{ height: windowHeight }">
          <view class="content">
            <view class="section f" id="current">
              <view class="city-title">当前城市</view>
              <view class="city-list b" v-if="current">
                <text @click="onSelect(current)" class="now">{{ current }}</text>
                <text class="gps">GPS定位</text>
              </view>
              <view class="city-list b gps" v-else>
                未获取到目前定位
              </view>
            </view>
            <view class="section f" id="hot" v-if="hotCitys.length">
              <view class="city-title title_a">国内热门城市</view>
              <view class="city-list">
                <view class="city-item" v-for="(city, i) in hotCitys" :key="i" @click="onSelect(city)">{{ city }}</view>
              </view>
            </view>
            <view class="section f" v-if="historyCity.length">
              <view class="city-title">历史访问城市</view>
              <view class="city-list">
                <view class="city-item" v-for="(city, i) in historyCity" :key="i" @click="onSelect(city)">{{ city }}</view>
              </view>
            </view>
            <view class="section" :id="item.letter" v-for="item in citys" :key="item.letter">
              <view class="letter">{{ item.letter }}</view>
              <view class="city-list">
                <view class="city_item" v-for="(city, itemIndex) in item.list" :key="itemIndex" @click="onSelect(city)">{{ city }}</view>
              </view>
            </view>
            <view class="footer">
              <view class="line line_a"></view>
              <view class="text">前辈说要有底线</view>
              <view class="line line_b"></view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>
<script>
import Citys from './citys';
export default {
  props: {
    hotCitys: {
      type: Array,
      default() {
        return [];
      }
    },
    historyCity: {
      type: Array,
      default() {
        return [];
      }
    },
    value: {
      type: String,
      default: '未设置',
      nowCity: ''
    }
  },
  data() {
    return {
      citys: Citys,
      windowHeight: '',
      scrollIntoId: 'F',
      current:this.value,
      list: [],
      timer: null,
      flag: false,
      searchKey: [],
      historyCityList: []
    };
  },
  onShow() {
    /* 定义方法  获取本地存储*/
    this.gethistoryCity();
  },
  mounted() {
    this.getSystemInfo();
  },
  methods: {
    gethistoryCity() {
      // uni.getStorage({
      //   key: 'historyCity',
      //   success: res => {
      //     console.log(res.data);
      //   }
      // });
    },
    /* 当输入框发生改变的时候*/
    handleInputChange(e) {
      // #ifdef H5
      document.activeElement.blur()
      // #endif
      if (this.timer) {
        clearTimeout(this.timer);
      } else if (e.target.value != '') {
        this.flag = true;
      }
      this.timer = setTimeout(() => {
        const result = [];
        for (let i in this.citys) {
          this.citys[i].list.forEach(value => {
            if (value.indexOf(e.target.value) > -1) {
              result.push(value);
            }
          });
        }
        this.list = result;
      }, 500);
    },
    getSystemInfo() {
      uni.getSystemInfo().then(res => {
        let [error, data] = res;
        this.windowHeight = `${data.windowHeight - 81}px`;
      });
    },
    scrollTo(letter) {
      this.scrollIntoId = letter === '#' ? 'current' : letter;
    },
    onSelect(city) {
      // #ifdef H5
      document.activeElement.blur()
      // #endif
      if (city) {
        uni.setStorageSync('chooseCitys', city);
      }
      setTimeout(function() {
        uni.redirectTo({
          url: '/pages/findShop/shopIndex?pre=chooseCity'
        })
      }, 500);
      // uni.setStorage({
      //   key: 'chooseCity',
      //   data: city,
      //   success: res => {
      //     uni.switchTab({
      //       url:`/pages/pushShop/pushShop`
      //     });
      //   }
      // });
      if (city) {
        var newArr = this.searchKey;
        newArr.push(city);
        let take = uni.getStorageSync('historyCity');
        let Deposit = newArr.concat(take);
        let SetArray = new Set(Deposit);
        let Arraydata = Array.from(SetArray);
        uni.setStorageSync('historyCity', Arraydata);
        this.current = city;
        this.$emit('input', city);
        this.$emit('on-select', city);
      }
     
      
    }
  }
};
</script>

<style lang="scss" scoped>
.cover-page {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 96rpx;
  bottom: 0;
  border-top: 10px solid #fafafa;
  background: #ffffff;
  z-index: 999;
}

.city_header {
  width: 100%;
  display: flex;
  background: #ffffff;
  padding: 30rpx auto;
  padding: 20rpx 0;
}

.city_input {
  width: 92%;
  height: 72rpx;
  display: flex;
  background: #f5f5f5;
  border-radius: 36rpx;
  margin: auto;
}

.search_icon {
  width: 32rpx;
  height: 32rpx;
  margin: 20rpx 18rpx 20rpx 20rpx;
}

.ipt {
  color: #bbbbbb;
  font-size: 28rpx;
  margin: 16rpx 0;
}

.f {
  background: #ffffff;
}

.now {
  font-size: 36rpx;
  color: #333333;
  height: 88rpx;
  line-height: 88rpx;
  font-weight: 500;
  min-width: 80rpx;
}

.gps {
  color: #999999;
  font-size: 24rpx;
  height: 88rpx;
  line-height: 88rpx;
  margin-left: 20rpx;
}

.b {
  border-bottom: 1px solid #eeeeee;
}

.text {
  font-size: 20rpx;
  color: #999999;
  line-height: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
}

.footer {
  display: flex;
  width: 100%;
  margin-top: 80rpx;
  margin-bottom: 54rpx;
}

.line {
  width: 54rpx;
  height: 2rpx;
  background: #bbbbbb;
  margin-top: 12rpx;
}

.line_a {
  margin-left: 31.73%;
  margin-right: 10rpx;
}

.line_b {
  margin-left: 10rpx;
}

.select-city-wrap {
  height: 100%;
  margin-top: 20rpx;
}

.select-city {
  .index {
    position: absolute;
    right: 0;
    top: 200rpx;
    bottom: 20upx;
    z-index: 500;
    color: #496888;
    font-size: 20rpx;

    .index-item {
      width: 55upx;
      height: 42upx;
      line-height: 42upx;
      text-align: center;
    }

    .index-title {
      width: 55upx;
      height: 60upx;
      text-align: center;
    }
  }

  .section {
    .city-title {
      color: #999;
      font-size: 28upx;
      text-indent: 30rpx;
      height: 68rpx;
      line-height: 68rpx;
    }
    .title_a {
      padding: 16rpx 0;
    }
    .letter {
      width: 100%;
      color: #999999;
      font-size: 28rpx;
      line-height: 100rpx;
      text-align: left;
      text-indent: 30rpx;
      background: #f1f1f1;
    }

    .city-list {
      display: flex;
      flex-wrap: wrap;
      margin-left: 30rpx;
      position: relative;
      .city-item {
        width: 190rpx;
        height: 55rpx;
        margin-right: 36rpx;
        margin-bottom: 28rpx;
        line-height: 55rpx;
        text-align: center;
        border: 1px solid #dcdcdc;
        border-radius: 6rpx;
        color: #333;
        font-size: 28rpx;
      }

      .city_item {
        width: 100%;
        line-height: 100rpx;
        border-bottom: 1px solid #eeeeee;
        font-size: 28rpx;
      }
    }
  }
}
.city-list {
  display: flex;
  flex-wrap: wrap;
  margin-left: 30rpx;
  .city_item {
    width: 100%;
    line-height: 100rpx;
    border-bottom: 1px solid #eeeeee;
  }
}
</style>
